<template>
  <div class="container">
    <Header></Header>
    <Nav></Nav>
    <!-- 图片 -->
    <div>
      <img src="../assets/study_center.jpg" class="sc_img">
    </div>
    <!-- 中心部分 -->
    <div class="content">
      <!-- 名师专栏 -->
      <router-link to="/main_teacher">
        <div class="contentOne">
          <a href="###" class="titleOne"><span>名师专栏</span></a>
          <div class="teacher">
            <table>
              <tr @click="studyCenter_teacher(index)" v-for="(ti, index) in tInformation" :key="ti.id" v-if="index < 6"
                style="display: inline;">
                <td><a href="###"><img v-if="index == 0" src="../assets/studyCenter_ms1.jpg"
                      style="width:70px;height: 70px;">
                    <img v-if="index == 1" src="../assets/studyCenter_ms2.jpg" style="width:70px;height: 70px;">
                    <img v-if="index == 2" src="../assets/studyCenter_ms3.png" style="width:70px;height: 70px;">
                    <img v-if="index == 3" src="../assets/studyCenter_ms4.jpg" style="width:70px;height: 70px;">
                    <img v-if="index == 4" src="../assets/studyCenter_ms5.png" style="width:70px;height: 70px;">
                    <img v-if="index == 5" src="../assets/studyCenter_ms6.jpg" style="width:70px;height: 70px;"></a>
                  <p class="techerI"><a href="###">{{
                    ti.title }}</a></p>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </router-link>
      <div class="contentSecond" style="margin-top: 30px;">
        <!-- 园长宝典 -->
        <div class="contentSecond">
          <a href="###" class="titleSecond"><span>园长宝典</span></a>
          <router-link to="/studyCenter_garden">
            <div class="garden">
              <table>
                <tr @click="studyCenter_garden(index)" v-for="(gi, index) in garden" :key="gi.id" v-if="index < 6"
                  style="display: inline;">
                  <td><a href="###"><img v-if="index == 0" src="../assets/studyCenter_yzbd1.jpg"
                        style="width:200px;height: 80px;">
                      <img v-if="index == 1" src="../assets/studyCenter_yzbd2.jpg" style="width:200px;height: 80px;">
                      <img v-if="index == 2" src="../assets/studyCenter_yzbd3.jpg" style="width:200px;height: 80px;">
                      <img v-if="index == 3" src="../assets/studyCenter_yzbd4.jpg" style="width:200px;height: 80px;">
                      <img v-if="index == 4" src="../assets/studyCenter_yzbd5.webp" style="width:200px;height: 80px;">
                      <img v-if="index == 5" src="../assets/studyCenter_yzbd6.jpg"
                        style="width:200px;height: 80px;"></a><span><a href="###">{{ gi.title }}</a></span></td>
                </tr>
              </table>
            </div>
          </router-link>
        </div>
      </div>
      <!-- 幼儿加油站 -->
      <div class="contentThird" style="margin-top: 30px;">
        <div class="contentThird">
          <a href="###" class="titleThird"><span>幼儿加油站</span></a>
          <router-link to="/studyCenter_garden">
            <div class="fight">
              <table>
                <tr @click="studyCenter_children(index)" v-for="(ti, index) in teacher" :key="ti.id" v-if="index < 6"
                  style="display: inline;">
                  <td><a href="###"><img v-if="index == 0" src="../assets/studyCenter_yejyz1.jpg"
                        style="width:200px;height: 80px;">
                      <img v-if="index == 1" src="../assets/studyCenter_yejyz2.jpg" style="width:200px;height: 80px;">
                      <img v-if="index == 2" src="../assets/studyCenter_yejyz3.webp" style="width:200px;height: 80px;">
                      <img v-if="index == 3" src="../assets/studyCenter_yejyz4.jpg"
                        style="width:200px;height: 80px;"></a><span><a href="###">{{ ti.title }}</a></span></td>
                </tr>
              </table>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/header.vue'
import Nav from '../components/nav.vue'
import Footer from '../components/footer.vue'
import eventBus from '../views/eventBus'

export default {
  name: 'login',
  components: {
    Header, Nav, Footer
  },
  data() {
    return {
      tInformation: [],
      garden: [],
      teacher: [],
    }
  },
  mounted() {
    // 学习中心名师专栏
    this.$axios.get('/api/imgInformation/tInformation')
      .then(res => {
        this.tInformation = res.data
        // console.log(res.data)
      })
      .catch(err => console.log(err)),
      // 学习中心幼儿专栏
      this.$axios.get('/api/information/garden')
        .then(res => {
          this.garden = res.data
          // console.log(res.data)
        })
        .catch(err => console.log(err)),
      // 学习中心名师专栏
      this.$axios.get('/api/information/teacher')
        .then(res => {
          this.teacher = res.data

        })
        .catch(err => console.log(err))
  },
  methods: {
    //数据分享
    studyCenter_teacher(index) {
      setTimeout(() => {
        // console.log(this.tInformation[0].title)
        eventBus.$emit('teacher_title', this.tInformation[index].title)
      }, 100),
        setTimeout(() => {
          eventBus.$emit('teacher_troduction', this.tInformation[index].troduction)
        }, 100),
        setTimeout(() => {
          eventBus.$emit('teacher_id', this.tInformation[index].id)
        }, 100)
    },
    studyCenter_garden(index) {
      setTimeout(() => {
        // console.log(this.tInformation[0].title)
        eventBus.$emit('garden_title', this.garden[index].title)
      }, 100),
        setTimeout(() => {
          eventBus.$emit('garden_information', this.garden[index].information)
        }, 100),
        setTimeout(() => {
          eventBus.$emit('garden_id', this.garden[index].id)
        }, 100)
    },
    studyCenter_children(index) {
      setTimeout(() => {
        // console.log(this.tInformation[0].title)
        eventBus.$emit('garden_title', this.teacher[index].title)
      }, 100),
        setTimeout(() => {
          eventBus.$emit('garden_information', this.teacher[index].information)
        }, 100),
        setTimeout(() => {
          eventBus.$emit('garden_id', this.teacher[index].id)
        }, 100)
    }
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
}

.sc_img {
  width: 100%;
  height: 400px;
}

.content {
  margin-left: 260px;
  width: 800px;
  height: 1200px;
}

.contentOne,
.contentSecond,
.contentThird {
  height: 360px;
  box-shadow: 0px 0px 15px gray;
}

.titleOne,
.titleSecond,
.titleThird {
  font-weight: bold;
  font-size: 30px
}

.teacher,
.garden,
.fight {
  margin-top: 30px;
  height: 290px;
}

td {
  margin-left: 40px;
  margin-top: 10px;
  float: left;
  width: 200px;
  height: 120px;
  display: block;
}

.ipt {
  position: absolute;
  top: 30px;
  left: 807px;
  width: 200px;
  height: 34px;
  border-radius: 37px 10px;
  outline: none;
}

.btn {
  position: absolute;
  top: 30px;
  left: 950px;
  width: 70px;
  border-radius: 37px 10px;
}

/* 名师板块 */
.teacherI {
  position: absolute;
  top: 100px;
}
</style>
